.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1ex 1em 1ex 2ex;

  user-select: none;

  &:hover {
    background-color: #f6f6f6;
    cursor: pointer;
  }

  .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    padding-left: 1em;

    > div {
      display: flex;
      //justify-content: center;
    }

    .name {
      font-size: 0.8rem;
      font-weight: bold;
      color: #997328;
    }

    .detail {
      font-size: 12px;

      > span:not(:last-child) {
        margin-right: 10px;
      }

      .value {
        font-size: 13px;
        font-weight: bold;
      }

      .pick {
        .value {
          color: #2764f1;
        }
      }
      .win {
        .value {
          color: #21a453;
        }
      }
    }
  }

  &:hover {
    .apply {
      visibility: visible;
    }
  }

  .apply {
    visibility: hidden;
    height: 48px;
    width: 48px;
    border-radius: 10px;
    //margin-right: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    -webkit-app-region: no-drag;
    //transition: all linear 0.2s;

    &:hover {
      cursor: pointer;
    }
  }

  .preview {
    display: flex;
    align-items: center;
    width: max-content;
  }

  .preview > div {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    background-size: contain;
    background-repeat: no-repeat;

    &.big {
      margin: 0 0.6ex;
      background-color: #000000;
    }

    &.sub,
    &.primary {
      height: 24px;
      width: 24px;
    }

    &.r-8000 {
      background-image: url('~src/assets/runes/8000.png');
    }

    &.r-8008 {
      background-image: url('~src/assets/runes/8008.png');
    }

    &.r-8021 {
      background-image: url('~src/assets/runes/8021.png');
    }

    &.r-8112 {
      background-image: url('~src/assets/runes/8112.png');
    }

    &.r-8128 {
      background-image: url('~src/assets/runes/8128.png');
    }

    &.r-8214 {
      background-image: url('~src/assets/runes/8214.png');
    }

    &.r-8230 {
      background-image: url('~src/assets/runes/8230.png');
    }

    &.r-8351 {
      background-image: url('~src/assets/runes/8351.png');
    }

    &.r-8360 {
      background-image: url('~src/assets/runes/8360.png');
    }

    &.r-8369 {
      background-image: url('~src/assets/runes/8369.png');
    }

    &.r-8437 {
      background-image: url('~src/assets/runes/8437.png');
    }

    &.r-8465 {
      background-image: url('~src/assets/runes/8465.png');
    }

    &.r-8005 {
      background-image: url('~src/assets/runes/8005.png');
    }

    &.r-8010 {
      background-image: url('~src/assets/runes/8010.png');
    }

    &.r-8100 {
      background-image: url('~src/assets/runes/8100.png');
    }

    &.r-8124 {
      background-image: url('~src/assets/runes/8124.png');
    }

    &.r-8200 {
      background-image: url('~src/assets/runes/8200.png');
    }

    &.r-8229 {
      background-image: url('~src/assets/runes/8229.png');
    }

    &.r-8300 {
      background-image: url('~src/assets/runes/8300.png');
    }

    &.r-8358 {
      background-image: url('~src/assets/runes/8358.png');
    }

    &.r-8400 {
      background-image: url('~src/assets/runes/8400.png');
    }

    &.r-8439 {
      background-image: url('~src/assets/runes/8439.png');
    }

    &.r-9923 {
      background-image: url('~src/assets/runes/9923.png');
    }
  }
}

.lane {
  $icon-size: 136px;

  background: url('~src/assets/lanes.png') no-repeat;
  overflow: hidden;
  width: $icon-size;
  height: $icon-size;
  zoom: 0.2;
  margin-left: 2ex;

  &.bottom {
    background-position: 0 0;
  }

  &.jungle {
    background-position: -136px 0;
  }

  &.middle {
    background-position: 0 -136px;
  }

  &.support {
    background-position: -136px -136px;
  }

  &.top {
    background-position: 0 -272px;
  }
}
